<template>
	<view>
		<view class="wrap-top-head flex column">
			<view class="location-search-bg flex align-center">
				<view class="location-bg flex align-center" @click.stop="$jump.go('/pages/home/home/changeCity')">
					<view class="city f-26 limit-num-line">{{ district }}</view>

					<image class="arrow" :src="$staticImagePath('article/arrow_down.png')" />
				</view>

				<view class="search-bg flex align-center">
					<image class="img" :src="$staticImagePath('common/search.png')" />

					<input
						class="input f-26"
						placeholder="搜索店铺名、菜品名"
						placeholder-class="place"
						v-model="searchForm.keyword"
						@confirm="onRefresh"
						confirm-type="search"
					/>
				</view>
			</view>

			<view class="wrap-screen-bg flex">
				<block v-for="(item, index) in screen_list" :key="index">
					<view class="screen-item flex align-center just-center" @click.stop="onScreen(item)">
						<view class="f-26" :class="item.title !== item.default ? 'active' : ''">{{ item.title }}</view>

						<image v-if="item.show" class="arrow" :src="$staticImagePath('common/arrow_up_black.png')" />
						<image v-else class="arrow" :src="$staticImagePath('common/arrow_down_black.png')" />
					</view>
				</block>
			</view>

			<scroll-view
				scroll-x
				class="wrap-labels-bg flex"
				v-if="labels_list.length > 0"
				:scroll-into-view="labelsInto"
			>
				<block v-for="(item, index) in labels_list" :key="index">
					<view
						class="labels-item f-26"
						:class="item.id == searchForm.label_id ? 'labels-active' : ''"
						:id="`labels_${item.id}`"
						@click.stop="onLabels(item)"
					>
						{{ item.name }}
					</view>
				</block>
			</scroll-view>

			<scroll-view
				scroll-x
				class="wrap-category-bg flex"
				v-if="category_list.length > 0"
				:scroll-into-view="categoryInto"
			>
				<view
					class="cate-item"
					:class="searchForm.shopcate_id === 0 ? 'cate-active' : ''"
					@click.stop="onAllCategory"
					:id="`category_0`"
				>
					<view class="flex column align-center just-center">
						<image :src="$staticImagePath('store/all_category.png')" />

						<view class="f-26 text">全部分类</view>
					</view>
				</view>

				<block v-for="(item, index) in category_list" :key="index">
					<view
						class="cate-item"
						:class="item.id == searchForm.shopcate_id ? 'cate-active' : ''"
						@click.stop="onCategory(item)"
						:id="`category_${item.id}`"
					>
						<view class="flex column align-center just-center">
							<image :src="$getImageURL(item.image)" />

							<view class="f-26 text">{{ item.name }}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>

		<!-- <view class="top">
			<view class="top-search">
				<image :src="$showImg('/images/demo/ss1.png')"></image>
				<input type="text" placeholder="搜索店铺名" v-model="searchForm.keyword" @confirm="search">
			</view>
			<view class="top-screen">
				<view v-for="(v,k) in screenList" @click="setShow(v)">
					{{v.title}}
					<image :src="$showImg(`/images/demo/sai${v.show?'2':'1'}.png`)"></image>
				</view>
			</view>
			<view class="top-label">
				<view :class="{active:searchForm.label_id == v.id}" @click="changeLabel(v)" v-for="v in label">
					{{v.name}}
				</view>
				
			</view>
		</view> -->

		<view class="list">
			<view class="list-item" v-for="(v, k) in list" :key="k" @click="toDetail(v)">
				<view class="list-item-distance">{{ v.distance }}km</view>
				<image :src="$getImageURL(v.avatar)"></image>
				<view class="list-item-right">
					<view class="list-item-title limit-num-line">{{ v.shopname }}</view>
					<view class="list-item-score">
						<view>评分:{{ v.star }}.0分</view>
						<view>销量:{{ v.month_count }}</view>
						<view class="item-avg-price">人均¥{{ v.per_capita }}</view>
					</view>
					<view class="list-item-label">
						<view v-for="(vv, idx) in v.label" :key="idx">{{ vv.name }}</view>
					</view>
					<view class="list-item-address limit-num-line">{{ v.address }}</view>
				</view>
			</view>
			<wanl-empty v-if="!list.length"></wanl-empty>
		</view>

		<view class="wrap-popup" v-if="allShow" @click="allMaskClose">
			<view @click.stop.prevent>
				<nearbyVue v-show="screen_list[0].show" @change="change($event, 'distance', 0)" class="popup" />
				<orderVue v-show="screen_list[1].show" @change="change($event, 'order', 1)" class="popup" />
				<screenVue v-show="screen_list[2].show" @change="change($event, 'filter', 2)" class="popup" />
			</view>
		</view>
	</view>
</template>

<script>
	import stoarge from "@/utils/stoarge.js";
	import nearbyVue from "./components/nearby.vue";
	import delicacyVue from "./components/delicacy.vue";
	import orderVue from "./components/order.vue";
	import screenVue from "./components/screen.vue";
	import { shopLabel, shopList, shopCate } from "@/API/business.js";
	import event from "@/utils/event.js";

	export default {
		components: {
			nearbyVue,
			delicacyVue,
			orderVue,
			screenVue,
		},
		data() {
			return {
				searchForm: {
					keyword: "",
					distance: 0,
					order: 0,
					price: 0,
					time: 0,
					shopcate_id: 0,
					label_id: 0,
				},
				labels_list: [], //标签数组
				labelsInto: "", //标签滑动的位置

				category_list: [], //分类数组
				categoryInto: "", //分类滑动的位置

				screen_list: [
					{ title: "附近", show: false, key: "distance", default: "附近" },
					{ title: "智能排序", show: false, key: "order", default: "智能排序" },
					{ title: "筛选", show: false, key: "", default: "筛选" },
				], //筛选

				list: [],
				page: 1,
				total: 0,

				province: "", //省份
				city: "", //市
				district: "", //区
				lat: "",
				lng: "",

				isDiscount: "0",
			};
		},
		onReady() {
			event.on("onSureChooseCity", this, (res) => {
				this.province = res.province;
				this.city = res.city;
				this.district = res.district;
				this.lat = res.lat;
				this.lng = res.lng;

				this.onRefresh();
			});
		},
		onLoad(options) {
			if (options.id && options.name) {
				this.searchForm.shopcate_id = options.id;
			}
			if (options.isDiscount) {
				this.isDiscount = options.isDiscount;
			}
			if (options.cate_id) {
				this.searchForm.shopcate_id = options.cate_id;
			}

			const locationInfo = this.$stoarge.getChangeCity();
			if (locationInfo) {
				this.province = locationInfo.province;
				this.city = locationInfo.city;
				this.district = locationInfo.district;
				this.lat = locationInfo.lat;
				this.lng = locationInfo.lng;
			}

			this.getCateData();
			this.getLabelData();
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		onUnload() {
			event.remove("onSureChooseCity", this);
		},
		computed: {
			allShow() {
				return this.screen_list.some((obj) => obj.show === true);
			},
		},
		methods: {
			/**
			 * 全部分类
			 */
			onAllCategory() {
				if (this.searchForm.shopcate_id === 0) {
					return;
				}
				this.searchForm.shopcate_id = 0;
				this.categoryInto = `category_0`;
				this.onRefresh();
			},
			/**
			 * 选择商品分类
			 */
			onCategory(item) {
				if (this.searchForm.shopcate_id === item.id) {
					return;
				}
				this.searchForm.shopcate_id = item.id;
				this.categoryInto = `category_${item.id}`;
				this.onRefresh();
			},
			/**
			 * 选择标签
			 */
			onLabels(item) {
				if (this.searchForm.label_id === item.id) {
					return;
				}
				this.searchForm.label_id = item.id;
				this.labelsInto = `labels_${item.id}`;
				this.onRefresh();
			},
			/**
			 * 筛选
			 */
			onScreen(item) {
				if (item.show === true) {
					item.show = false;
				} else {
					this.screen_list.map((item) => {
						item.show = false;
					});
					item.show = true;
				}
				this.$forceUpdate();
			},

			allMaskClose(item = "") {
				for (let i of this.screen_list) {
					if (i != item) {
						i.show = false;
					}
				}
			},

			change(e, key = "", index = "") {
				this.allMaskClose();
				if (key === "filter") {
					this.searchForm.price = e[0] === "" ? 0 : e[0].id;
					this.searchForm.time = e[1] === "" ? 0 : e[1].id;
				} else {
					this.searchForm[key] = e.id;
					this.screen_list[index].title = e.name;
				}
				this.onRefresh();
			},
			toDetail(item) {
				this.$jump.onStoreIndex(item.id);
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				shopList({
					page: this.page,
					...this.searchForm,
					city: [this.province, this.city, this.district].join("/"),
					lat: this.lat,
					lng: this.lng,
					is_discount: this.isDiscount,
				}).then((res) => {
					this.total = res.data.total;
					let list = res.data.data;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
			/**
			 * 获取标签
			 */
			getLabelData() {
				shopLabel().then((res) => {
					this.label = res.data;
					this.labels_list = res.data;
				});
			},
			/**
			 * 获取分类
			 */
			getCateData() {
				shopCate().then((res) => {
					this.category_list = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-top-head {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		background-color: white;
		box-shadow: 1rpx 2rpx 10rpx 1rpx rgba(182, 182, 182, 0.2);
		z-index: 10;
		padding: 20rpx 25rpx;
		box-sizing: border-box;
		gap: 30rpx;

		.location-search-bg {
			width: 100%;
			overflow: hidden;
			gap: 20rpx;

			.location-bg {
				margin-left: 15rpx;
				height: 26rpx;
				max-width: 300rpx;
				gap: 8rpx;

				.city {
					--limit-num: 1;
					color: #121212;
				}

				.arrow {
					width: 20rpx;
					height: 20rpx;
				}
			}

			.search-bg {
				flex: 1;
				height: 62rpx;
				background-color: #f6f6f6;
				border-radius: 31rpx;
				overflow: hidden;
				padding: 0 24rpx;
				gap: 12rpx;

				.img {
					width: 30rpx;
					height: 30rpx;
				}

				.input {
					flex: 1;
					overflow: hidden;
					color: #121212;
				}

				/deep/ .place {
					color: #bbbbbb;
				}
			}
		}

		.wrap-screen-bg {
			width: 100%;
			height: 30rpx;
			overflow: hidden;

			.screen-item {
				flex: 1;
				overflow: hidden;
				gap: 5rpx;
				color: #333333;

				.active {
					color: $theme-color;
				}

				.arrow {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		.wrap-labels-bg {
			width: 100%;
			height: 52rpx;
			overflow: hidden;
			white-space: nowrap;

			.labels-item {
				display: inline-block;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				padding: 0rpx 20rpx;
				background: #e6e6e6;
				color: #333333;
				margin-right: 20rpx;
				border-radius: 26rpx;
				overflow: hidden;

				&:last-child {
					margin-right: 0rpx;
				}
			}

			.labels-active {
				color: white;
				background: $theme-gradit-color;
			}
		}

		.wrap-category-bg {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;

			.cate-item {
				display: inline-block;
				padding: 20rpx;
				margin-right: 20rpx;
				overflow: hidden;
				border-radius: 10rpx;

				> view {
					width: 100%;
					height: 100%;
					gap: 20rpx;
					color: #333333;

					> image {
						width: 50rpx;
						height: 50rpx;
					}
				}

				&:last-child {
					margin-right: 0rpx;
				}
			}

			.cate-active {
				border: 2rpx solid $theme-color;

				.text {
					color: $theme-color;
				}
			}
		}
	}

	.wrap-popup {
		position: fixed;
		left: 0;
		top: 164rpx;
		width: 100%;
		height: calc(100vh - 164rpx);
		overflow: hidden;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.5);

		.popup {
			position: absolute;
			top: 0;
			left: 0rpx;
			width: 750rpx;
			min-height: 450rpx;
			// max-height:550rpx;
			background: #ffffff;
			border-radius: 0rpx 0rpx 30rpx 30rpx;
			z-index: 100;
			overflow: hidden;
		}
	}

	.top {
		background: #ffffff;
		box-shadow: 1rpx 2rpx 10rpx 1rpx rgba(182, 182, 182, 0.2);
		padding: 3rpx 25rpx 20rpx;
		position: sticky;
		top: 0;
		z-index: 10;

		&-search {
			border-radius: 100rpx;
			display: flex;
			background-color: #f6f6f6;
			padding: 16rpx 24rpx;
			gap: 12rpx;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		&-screen {
			display: flex;
			justify-content: space-around;
			padding: 25rpx 0;

			> view {
				display: flex;
				gap: 8rpx;
				align-items: center;

				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		&-label {
			display: flex;
			gap: 15rpx;
			position: relative;

			> view {
				width: 140rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				background: #e6e6e6;
				border-radius: 26rpx;
				border: 1px solid #e6e6e6;
			}

			> view.active {
				background: #fef7f4 !important;
				border: 1px solid #f6b99f !important;
				color: #f6b99f !important;
			}

			.popup-mask {
				position: absolute;
				left: -25rpx;
				top: 0;
				width: 100vw;
				height: 100vh;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 9;
			}

			.popup {
				position: absolute;
				top: 0;
				left: -25rpx;
				width: 750rpx;
				min-height: 450rpx;
				// max-height:550rpx;
				background: #ffffff;
				border-radius: 0rpx 0rpx 30rpx 30rpx;
				z-index: 10;
				overflow: hidden;
			}
		}
	}

	.list {
		display: flex;
		flex-direction: column;
		padding: 25rpx;
		gap: 22rpx;

		&-item {
			position: relative;
			padding: 40rpx 20rpx 20rpx;
			background-color: #fff;
			border-radius: 16rpx;
			display: flex;
			gap: 18rpx;

			&-distance {
				position: absolute;
				right: 23rpx;
				top: 15rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #888888;
			}

			&-right {
				flex: 1;
				color: #888888;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				gap: 20rpx;
			}

			&-title {
				--limit-num: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #2f3135;
			}

			> image {
				width: 180rpx;
				height: 180rpx;
			}

			&-score {
				display: flex;
				gap: 24rpx;

				> view:nth-child(1) {
					display: flex;
					gap: 10rpx;
					color: #feca36;
					align-items: center;

					> view:nth-child(1) {
						display: flex;
						gap: 5rpx;
						align-items: center;
					}
				}
			}

			&-label {
				display: flex;
				gap: 11rpx;
				flex-wrap: wrap;

				> view {
					padding: 2rpx 10rpx;
					background: #fef7f4;
					border-radius: 5rpx;
					border: 1px solid #f6b99f;
					color: #f6b99f;
				}
			}
			&-address {
				--limit-num: 1;
			}
		}
	}

	.star {
		width: 26rpx;
		height: 26rpx;
	}
</style>
